<template>
    <el-form ref="formRef" :model="props" label-width="100px" class="demo-ruleForm">
        <el-form-item 
            v-for="(domain, index) in props.formData"
            :label="domain.label" 
            :prop="'formData.' + index + '.value'" 
            :required="domain.required"
            :label-width="domain.labelWidith"
            :rules="domain.rules || { required: domain.required, message: '请输入'+ domain.label, trigger: 'blur'}">
            <template v-if="domain.type === 'uploadFile'">
                <UploadFild v-model="domain.value" :limit="domain.limit" :listType="domain.listType" :fileType="domain.fileType" :fileSize="domain.fileSize"/>
            </template>
            <component 
                v-else
                :is="getWidgetName(domain.type)" 
                v-model="domain.value"
                clearable
                :value-format="['datetimerange'].includes(domain.widgetType)?'YYYY-MM-DD HH:mm:ss': 'YYYY-MM-DD'" 
                :type="domain.widgetType||''"
                :multiple="domain.multiple||false"
                :options="domain.cascaderOptions||[]"
                is-range
                range-separator="至" 
                start-placeholder="开始时间" 
                end-placeholder="结束时间" 
                :disabled="domain.disabled||false"
                :placeholder="domain.placeholder||'请输入'+domain.label"
                :style="domain.style||{width: '100%'}">
                <template v-slot="scope" v-if="domain.options?.length>0">
                    {{JSON.stringify(scope) === '{}'?'': scope}}
                    <template v-if="domain.type === 'select'">
                        <el-option v-for="item in domain.options" :key="item.label" :label="item.label" :value="item.value"></el-option>
                    </template>
                    <template v-if="domain.type === 'radio'">
                        <el-radio v-for="item in domain.options" :key="item.label" :label="item.value">{{item.label}}</el-radio>
                    </template>
                    <template v-if="domain.type === 'checkbox'">
                        <el-checkbox v-for="item in domain.options" :key="item.label" :label="item.value">{{item.label}}</el-checkbox>
                    </template>
                </template>
            </component>
        </el-form-item>
    </el-form>
    <slot></slot>
    <div class="text-right">
        <el-button @click="emit('close')">取消</el-button>
        <el-button type="primary" :disabled="loading" @click="submitForm(formRef)">提交</el-button>
    </div>
</template>
<script setup>
import { ElTimeSelect, ElSelect,ElInputNumber, ElTimePicker, ElDatePicker, ElInput, ElForm, ElFormItem, ElOption, ElRadioGroup, ElRadio, ElButton, ElCascader, ElCheckbox, ElCheckboxGroup } from 'element-plus'
import { ref } from 'vue';
import { paramsData } from '@/utils'
import UploadFild from "./uploadFile.vue"
const props = defineProps(['formData'])
const emit = defineEmits(['close', 'callback'])
const formRef = ref()
const loading = ref(false)
// 获得组件名称
function getWidgetName(type) {
    let obj = {
        timeSelect: ElTimeSelect,
        timePicker: ElTimePicker,
        datePicker: ElDatePicker,
        input: ElInput,
        select: ElSelect,
        radio: ElRadioGroup,
        cascader: ElCascader,
        checkbox: ElCheckboxGroup,
    }
    return obj[type]
}

// 提交
const submitForm = async(formEl) => {
  if (!formEl) formEl = formRef.value
  formEl.validate(async(valid) => {
    if (valid) {
      emit('callback', paramsData(props.formData))
      loading.value = true
      setTimeout(() => {
        loading.value = false
      }, 1000)
    } else {
      return false
    }
  })
}
</script>
<style scoped>
.text-right{
    text-align: right;
}
</style>